<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import hTable from './components/h-table/h-table.vue';
// vue-router会给我们提供一些方法
const router = useRouter();
// 当前的路由信息
const route = useRoute();

const toHome = () => {
	router.push('/');
};

const toAbout = () => {
	// router.push('/about?id=1')
	router.push({
		path: '/about',
		query: {
			id: 1
		}
	});
};

const columns = [
	{
		label: '食品名称',
		prop: 'foodName',
		width: '100',
		align: 'left'
	},
	{
		label: '食品价格',
		prop: 'foodPrice'
	}
];

const data = [
	{
		foodName: '炸鸡腿',
		foodPrice: '19'
	},
	{
		foodName: '肯德基',
		foodPrice: '29'
	},
	{
		foodName: '兰州拉面',
		foodPrice: '9'
	},
	{
		foodName: '麦当劳',
		foodPrice: '60'
	}
];
</script>

<template>
	<div class="app-warp"></div>
	<!-- <h-table
        :columns="columns"
        :data-source="data"
    ></h-table> -->
	<!-- <h1>App</h1>
    <button @click="toHome">跳转到 home</button>
    |
    <button @click="toAbout">跳转到 about</button> -->
	<!-- 跳转路由 -->
	<!-- <RouterLink to="/">home</RouterLink> -->

	<!-- <RouterLink to="/about">about</RouterLink> -->
	<!-- 路由显示的地方 -->
	<!-- <br /> -->
	<!-- <RouterView /> -->
</template>

<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
</style>
